<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
</head>
<body>
  <div id="app">
    增加购物车
    商品名字
    <input type="text" v-model="item.name">
    商品价格
    <input type="text" v-model.number="item.price">
    购买数量
    <input type="text" v-model.number="item.num">
    <button @click="addItem">增加</button>
    <table class="table table-bordered" style="width: 600px;margin: 30px auto;">
      <tr>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>购买数量</th>
        <th>小计</th>
        <th>操作</th>
      </tr>
      <tr v-if="items.length === 0">
        <td colspan="5" align="center">
          暂无商品
        </td>
      </tr>
      <tr v-for="(item,index) in items">
        <td>
          <input @change="itemSelectedChange" type="checkbox" v-model="item.selected">
          <span>{{item.name}}</span>
        </td>
        <td>
          ￥ {{item.price}}
        </td>
        <td>
          <button @click="addNum(index)" class="btn btn-xs">+</button>
          <span>{{item.num}}</span>
          <button @click="reduceNum(index)" class="btn btn-xs">-</button>
        </td>
        <td>
          ￥{{(item.price*item.num).toFixed(2)}}
        </td>
        <td>
          <button class="btn btn-danger" @click="delItem(index)">删除</button>
        </td>
      </tr>
      <tr>
        <td>合计</td>
        <td colspan="4">
          全选：<input type="checkbox" @change="allCheckedChange" v-model="allChecked">
          总价格: ￥{{total}}
        </td>
      </tr>
    </table>
  </div>
  <script src="./vue.js"></script>
  <script>
      const vm = new Vue({
        el: '#app',
        data: {
          // 待增加商品
          item: {
            name: '',
            price: 0,
            num: 0
          },
          // 购物车中商品
          items: [
            {
              name: '商品1',
              price: 18.8,
              num: 1,
              selected: true
            },
            {
              name: '商品2',
              price: 19.8,
              num: 1,
              selected: true
            },
            {
              name: '商品3',
              price: 28.8,
              num: 1,
              selected: false
            },
            {
              name: '商品4',
              price: 56.8,
              num: 1,
              selected: true
            }
          ],
          total: 0,
          allChecked: true
          // 总价格和全选需要计算才能得到
        },
        methods: {
          addItem () {
            this.items.push({
              ...this.item,
              selected: true
            })
            this.calcTotal();
            this.calcAllchecked();
          },
          // 点击切换全选状态
          allCheckedChange () {
         
            this.items.forEach(item => {
              item.selected = this.allChecked;
            })
            this.calcTotal();
          },
          // 改变商品选中状态
          itemSelectedChange(){
            this.calcAllchecked();
            this.calcTotal();
          },
          // 删除商品
          delItem(index){
            if(confirm('您确认要删除嘛?')){
              this.items.splice(index, 1);
              this.calcTotal();
              this.calcAllchecked();
            }
          },
          // 减少购买数量
          reduceNum (index) {
            this.items[index].num--;
            if(this.items[index].num <=1 ){
              this.items[index].num = 1;
            }
            // 重新计算总价格
            this.calcTotal();
          },
          // 增加购买数量
          addNum (index) {
            this.items[index].num++;
            // 重新计算总价格
            this.calcTotal();
          },
          // 计算商品总价格
          calcTotal () {
            /* 
              所有已经选中的 的 单价 * 数量总格
            */
            // 过滤掉未选中商品
            const selectedItems = this.items.filter(item => item.selected);  
            // 累加
            this.total = 0;
            selectedItems.forEach(item => {
              this.total += item.num * item.price;
            })
            this.total = parseFloat(this.total.toFixed(2));
          },
          // 计算全选状态
          calcAllchecked () {
            /* 
              所有商品 选中状态都为true 则全选为true
              否则 全选为false
            */
            this.allChecked = this.items.every(item => item.selected);
          }
        }
      })
      vm.calcTotal();
      vm.calcAllchecked();
     
  </script>
</body>
</html>